﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
        }
        .target
        {
            width: 900px;
            height: 90px;
        }
        .target-container
        {
            width: 133px;
            height: 88px;
            float: left;
            margin-right: 10px;
            position: relative;
        }
        
        .draggable
        {
            width: 900px;
            height: 90px;
            margin-top: 50px;
        }
        .draggable div
        {
            float: left;
            margin-right: 10px;
        }
        
        .ui-draggable
        {
            width: 133px;
            height: 88px;
            background-color: #BBBDBF;
            z-index: 100;
            cursor:move;
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
        }
        .imagebox_placehoder
        {
            width: 133px;
            height: 88px;
            border: 0px solid #555555; /*border 0*/
            background-color: #D8DEE2;
        }
        
        .container
        {
            margin: 0 auto;
            width: 900px;
        }
    </style>
    <script src="jquery-ui-1.9.0.custom/js/jquery-1.8.2.js" type="text/javascript"></script>
    <!--<script src="jquery-ui-1.9.0.custom/js/jquery-ui-1.9.0.custom.js" type="text/javascript"></script>-->
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <div class="target">
            <div class="imagebox_placehoder target-container">
                1</div>
            <div class="imagebox_placehoder target-container">
                2</div>
            <div class="imagebox_placehoder target-container">
                3</div>
        </div>
        <div class="draggable">
            <div class="imagebox_placehoder">
                <div class="ui-draggable">
                </div>
            </div>
            <div class="imagebox_placehoder">
                <div class="ui-draggable">
                </div>
            </div>
            <div class="imagebox_placehoder">
                <div class="ui-draggable">
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        $(".ui-draggable").draggable({
            revert: true,
            revertDuration: "300",
            containment: "document",
            stop: function (event, ui) {

            },
            drag: function () {

            }
        });


        $(".imagebox_placehoder").droppable({
            tolerance: "pointer",
            drop: function (event, ui) {

                if ($(this).children().length == 1) {

                    var children = $(this).children();

                    var offset_child = calcOffset($(this).children().offset(), ui.draggable.parent().offset());
                    var offset_drag = calcOffset(ui.draggable.offset(), $(this).offset());

                    children.appendTo(ui.draggable.parent());
                    ui.draggable.appendTo(this);

                    children.css(offset_child);
                    children.animate({ "left": "0", "top": "0" }, 600);

                    ui.draggable.css(offset_drag);
                    ui.draggable.animate({ "left": "0", "top": "0" }, 600);

                    return;
                }

                var offset = calcOffset(ui.draggable.offset(), $(this).offset());

                ui.draggable.appendTo(this);

                ui.draggable.css(offset);
                ui.draggable.animate({ "left": "0", "top": "0" }, {
                    step: function (now, fx) {
                        $(this).css('-webkit-transform', 'rotate(0deg)');
                        $(this).css('-moz-transform', 'rotate(0deg)');
                        $(this).css('transform', 'rotate(0deg)');
                    }, duration: 'slow'
                }, 600);
            }
        });

        function calcOffset(setA, setB) {
            return {
                "left": parseInt(setA.left - setB.left, 10),
                "top": parseInt(setA.top - setB.top, 10)
            }
        }
    </script>
</body>
</html>
